<template>
  <div>
    <el-card class="box" ref="box">
      <p>总分：{{ totalNum }}</p>
    </el-card>
    <avue-crud :option="option" :data="data" @refresh-change="searchHandler">
      <!-- <template slot="menu" slot-scope="scope">
        <el-button :size="scope.size" :type="scope.type">自定义内容</el-button>
      </template> -->
    </avue-crud>
  </div>
</template>
<script>
import { httpCheck } from "@/api/studentsPage/approval.js";
export default {
  name: "queryGrades",
  data() {
    return {
      totalNum: 0,
      data: [],

      option: {
        size: "mini",
        headerAlign: "center",
        align: "left",
        border: true,
        index: true,
        defaultExpandAll: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        menu: false,
        rowKey: "key",
        treeProps: { children: "childList" },
        column: [
          {
            label: "标题",
            prop: "key",
          },

          {
            label: "最高得分",
            prop: "maxGrades",
          },

          {
            label: "当前分数",
            prop: "currentGrades",
          },

          {
            label: "最终得分",
            prop: "endGrades",
          },
          {
            label: "值",
            prop: "value",
          },
        ],
      },
    };
  },
  mounted() {
    this.searchHandler();
  },
  methods: {
    searchHandler() {
      this.totalNum = 0;
      httpCheck("queryGrades", "", "GET").then((res) => {
        res.data.forEach((ele) => {
          this.totalNum = this.totalNum + ele.endGrades;
        });
        this.totalNum = this.totalNum.toFixed(2);
        this.data = res.data;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  margin: 0 30px;
  border-radius: 10px;
  height: 35px;
  width: 300px;
  line-height: 1px;
  margin-bottom: -35px;
  p {
    margin-left: 0px;
    color: red;
    margin-top: -4px;
    font-weight: 600;
  }
}
.avue-crud {
  margin-bottom: 40px;
}
</style>
